package com.fiberhome.nas.feature.auth.component

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.sp

/**
 * 手机号输入组件，包含国家代码与输入框
 *
 * @param account 手机号文本
 * @param onAccountChange 手机号变更回调
 * @param accountFieldFocused 输入框焦点状态
 * @param placeholder 提示文本，默认为"请输入手机号"
 * @param nextAction 输入法下一步动作，默认为Next
 * @param modifier 可选修饰符
 */
@Composable
fun AccountInputField(
    account: String,
    onAccountChange: (String) -> Unit,
    accountFieldFocused: MutableState<Boolean>,
    placeholder: String = "",
    nextAction: ImeAction = ImeAction.Next,
) {
    // 账号输入框
    OutlinedTextField(
        value = account,
        onValueChange = onAccountChange,
        label = { Text(placeholder) },
        leadingIcon = {
            Icon(
                imageVector = Icons.Default.Person,
                contentDescription = "账号图标"
            )
        },
        modifier = Modifier
            .fillMaxWidth()
            .onFocusChanged { accountFieldFocused.value = it.isFocused },
        singleLine = true,
        textStyle = TextStyle(
            fontSize = 16.sp,
            color = MaterialTheme.colorScheme.onSurface
        ),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Unspecified,
            imeAction = nextAction
        ),
    )
}
